import { Tooltip } from 'antd';

/**
 * 列表页一行打点气泡显示
 * @param {string} content - 字符串内容
 * @param {number} width - 宽度限定
 * @param {number} fontSize - 字体大小
 * @param {number} lineHeight [index=16] - 行高，即单行高度
 * @return {ReactNode} 显示内容
 */

 export const oneLineShow = (content: string, width: number, fontSize = 14, lineHeight = 16) =>
 isOverLines(content, width, fontSize, lineHeight, 1) ? (
   <Tooltip placement="bottom" title={content}>
     <div className="text-one-line-ellipsis" style={{ width }}>
       {content || '-'}
     </div>
   </Tooltip>
 ) : (
   <div className="text-one-line-ellipsis">{content || '-'}</div>
 );

 /**
 * 计算输入字符串是否超过指定行数
 * @param {string} content - 字符串内容
 * @param {number} width - 宽度限定
 * @param {number} fontSize - 字体大小
 * @param {number} lineHeight [index=16] - 行高，即单行高度
 * @param {number} lines [index=3] - 限定行数
 * @return {boolean} 是否超过行数
 */
export const isOverLines = (
    content: string,
    width: number,
    fontSize: number,
    lineHeight = 16,
    lines = 3
  ) => {
    const testDom = document.createElement('div');
    testDom.style.width = `${width}px`;
    testDom.style.fontSize = `${fontSize}px`;
    testDom.style.position = 'fixed';
    testDom.style.visibility = 'hidden';
    testDom.style.wordBreak = 'break-all';
    testDom.style.lineHeight = `${lineHeight}px`;
    testDom.innerHTML = content;
    document.body.appendChild(testDom);
    const { height } = testDom.getBoundingClientRect();
    document.body.removeChild(testDom);
    return height > lineHeight * lines;
  };